<template>
  <!---------- 查询表单form begin ----------->
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item label="清洗规则名称" class="smart-query-form-item">
        <a-input v-model:value="queryForm.name" placeholder="请输入清洗规则名称" />
      </a-form-item>
      <a-form-item class="smart-query-form-item">
        <a-button type="primary" @click="queryData">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery" class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="showForm()" type="primary" size="small">
          <template #icon>
            <PlusOutlined />
          </template>
          添加清洗规则
        </a-button>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="null" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->

    <!---------- 表格 begin ----------->
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      rowKey="cleanId"
      bordered
      :loading="tableLoading"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'modelId'">
          {{ getDictLabel(record.modelId, modelList, { value: 'modelId', label: 'modelName' }) }}
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-switch
            v-model:checked="record.isEnable"
            checked-children="启用"
            :checkedValue="true"
            un-checked-children="禁用"
            :unCheckedValue="false"
            @change="statusChange(record)"
          />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button type="link" @click="dataModel(record)"> 规则细项</a-button>
            <a-button type="link" @click="showForm(record)"> 编辑</a-button>
            <a-button type="link" @click="onDelete(record)"> 删除</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <!---------- 表格 end ----------->

    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageNum"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="queryData"
        @showSizeChange="queryData"
        :show-total="(total) => `共${total}条`"
      />
    </div>

    <IotDeviceForm ref="formRef" @reloadList="queryData" @close="formClose" v-if="formShow" :modelList="modelList" />
  </a-card>
</template>
<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { iotApi } from '/@/api/plat/cleanRule';
  import { iotApi as iotModelApi } from '/@/api/plat/dataModel';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import IotDeviceForm from './form.vue';
  import { PageMixin, getDictLabel } from '/@/utils/mixin';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  const { total, tableLoading, tableData, selectedRowKeyList, resetQueryForm, queryTableData, deleteFn, batchDeleteFn, queryFormState, watchTotal } =
    PageMixin();

  const defalutData = {
    name: undefined,
  };
  const modelList = ref([]);
  let queryForm = ref(Object.assign({}, queryFormState, defalutData));
  watchTotal(queryForm, queryData);
  // 表格列
  const columns = ref([
    {
      title: '关联数据模型',
      dataIndex: 'modelId',
    },
    {
      title: '清洗规则名称',
      dataIndex: 'ruleName',
    },
    {
      title: '规则描述',
      dataIndex: 'description',
    },
    {
      title: '启用状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 150,
    },
  ]);
  // 重置查询条件
  function resetQuery() {
    queryForm.value = resetQueryForm(defalutData);
    queryData();
  }
  // 查询数据
  function queryData() {
    queryTableData(iotApi.queryPage, queryForm.value);
  }
  // 列选择
  function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
  }
  // 状态变化
  function statusChange(val) {
    iotApi
      .update(val)
      .then(() => {
        queryData();
      })
      .catch(() => {
        queryData();
      });
  }
  // 数据模型
  function dataModel(row) {
    router.push({
      path: '/rule/item',
      query: {
        cleanId: row.cleanId,
        modelId: row.modelId,
      },
    });
  }
  // 单个删除
  async function onDelete(data) {
    await deleteFn(data, iotApi.delete, 'cleanId');
    queryData();
  }

  function getModelList() {
    iotModelApi.queryList().then(({ data }) => {
      modelList.value = data;
    });
  }
  onMounted(queryData);
  onMounted(getModelList);
  // 添加/修改
  const formRef = ref();
  const formShow = ref(false);
  function showForm(data) {
    formShow.value = true;
    nextTick(() => {
      formRef.value.show(data);
    });
  }
  function formClose() {
    formShow.value = false;
  }
</script>

<style scoped>
  .smart-table-operate {
    display: flex;
    justify-content: space-between;
  }
  .device-menu-item:hover {
    color: #1677ff;
  }
</style>
